<template>
    <div class="tabs">
        <RouterView />
        <VanTabbar v-model="active">
            <VanTabbarItem name="home">
                <span class="textSize">诊疗首页</span>
                <template #icon="props">
                    <img :src="props.active ? icon.home : icon.inactiveHome" />
                </template>
            </VanTabbarItem>
            <VanTabbarItem name="official">
                <span class="textSize">微官网</span>
                <template #icon="props">
                    <img :src="props.active ? icon.official : icon.inactiveOfficial" />
                </template>
            </VanTabbarItem>
            <VanTabbarItem name="message">
                <span class="textSize">消息中心</span>
                <template #icon="props">
                    <img :src="props.active ? icon.message : icon.inactiveMessage" />
                </template>
            </VanTabbarItem>
            <VanTabbarItem name="my">
                <span class="textSize">我的</span>
                <template #icon="props">
                    <img :src="props.active ? icon.my : icon.inactiveMy" />
                </template>
            </VanTabbarItem>
        </VanTabbar>
    </div>
</template>

<script setup lang="ts" name="TabsView">
import { RouterView, useRoute, useRouter } from 'vue-router';

import { ref, watch } from 'vue';

const icon = {
    home: 'https://cdn7.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u172.svg',
    inactiveHome:
        'https://cdn7.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u173.svg',
    official: 'https://cdn7.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u179.svg',
    inactiveOfficial:
        'https://cdn7.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u177.svg',
    message: 'https://cdn7.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u184.svg',
    inactiveMessage:
        'https://cdn7.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u182.svg',
    my: 'https://cdn7.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u189.svg',
    inactiveMy:
        'https://cdn7.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u187.svg',
};

const route = useRoute()
const router = useRouter()

let active = ref(route.name);

watch(active, (val) => {
    router.push({
        name: val
    })
})
console.log(active.value)


</script>

<style lang="scss" scoped>
.tabs {
    width: 100%;
}

.textSize {
    font-size: 13px;
}
</style>
